<!-- 呈送领导选择 -->
<template>
	<view>
	  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet"  title="呈送领导" cancel-text="确定">
			<van-list class="list-item" v-model="loading" :finished="finished" @load="load">
				<van-checkbox-group v-model="result" @change="onChange">
					<van-cell-group>
						<van-cell v-for="(item, index) in dataList" clickable :key="index" :title="item.userName"
							@click="toggle(index)">
							<template #right-icon>
								<van-checkbox :name="item" ref="checkboxes" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-checkbox-group>
			</van-list>
	  </van-action-sheet>
	</view>
</template>

<script>

export default{
  props: {
    showCsld:{
      type: Boolean,
      default: true
    },
	dataList:{
		type: Array,
		default:()=>[]
	}
  },
  data(){
    return{
		result:[],
		loading: false,
		finished: true, //不显示加载中
		showCompo:false,
	}
  },
 watch: {
	 showCsld(val){
	 	this.showCompo = val
	 },
 },
 mounted() {
 	this.result=[]
 },
  methods: {
	  closeSheet(){
	    //this.result:[{"name":"航安办","id":"002001007","sort":6,"value":"002001007_航安办_4131"},{"name":"法规处","id":"002001008","sort":9,"value":"002001008_法规处_10257"}]
		this.$emit('closeCsldSheet',this.result)

	  },
	  load() {
	  	// 异步更新数据
	  	// setTimeout 仅做示例，真实场景中一般为 ajax 请求
	  	setTimeout(() => {
	  		// for (let i = 0; i < 10; i++) {
	  		// 	this.newsList.push(this.newsList.length + 1);
	  		// }

	  		// 加载状态结束
	  		this.loading = false;

	  		// 数据全部加载完成
	  		if (this.newsList.length >= 5) {
	  			this.finished = true;
	  		}
	  	}, 100);
	  },

	  toggle(index) {
	  	this.$refs.checkboxes[index].toggle();
	  },

	  onChange(item){
	  	// console.log("item: " + JSON.stringify(item));
	  	//result: ["04ca78d82672464b86117fe654e42943","1e0faa87e7dc435e97003d474173fbf8"]
	  	console.log("result: " + JSON.stringify(this.result));//选中的单位id

	  },
  }
}
</script>

<style>
	.van-action-sheet{
	  z-index: 99999;
	  min-height: 80%;
	}
	/* .list-item{
		margin-bottom: 100rpx;
	} */
	/* .btn-bottom{
		background-color: #FFFFFF;
		height: 100rpx;
		border-top: 10rpx solid #f7f8fa;
		position: fixed;
		bottom: 0;
		width: 100%;
	} */
</style>
